<template>
    <div>
        <v-header :title="title">
            <div slot="left" class="backs_icon"></div>
        </v-header>
        <div class="main_allScroll" style="position: fixed;top: 0;bottom: 0;">
            <div class="shakeBg">
                <div class="shakeStartBtn" v-show="gameStatus == 'startBefore'" @click="gameStart"></div>
            </div>
            <div style="opacity: 0">
                <audio :src="aa"  ref="shakeAudio">
                    您的浏览器不支持 audio 标签。
                </audio>
                <audio :src="bb"  ref="shakeAudioTwo">
                    您的浏览器不支持 audio 标签。
                </audio>
            </div>
            <div v-transfer-dom>
                <popup v-model="show" position="top" is-transparent="true" :hide-on-blur="false"
                       should-scroll-top-on-show height="100%">
                    <div style="width: 100%;height: 100%" v-show="gameStatus == 'start' ||gameStatus == 'open'">
                        <div class="gameTime" :style="{top:parseFloat(interactive.statusBarHeight.height) + 0.26 + 'rem'}">
                            <span>倒计时{{time}}s</span>
                        </div>
                        <div class="shack_pic" :style="{top:parseFloat(interactive.statusBarHeight.height) + 2.72 + 'rem'}">
                            <img src="../../assets/img/shake_pic.png" v-show="!shakeStatus" alt="">
                            <img src="../../assets/img/shake_pic.gif" alt="" v-show="shakeStatus">
                        </div>
                    </div>
                    <div style="width: 100%;height: 100%" v-show="gameStatus == 'openAfter'">
                        <div class="shakeClose" @click="init" :style="{top:parseFloat(interactive.statusBarHeight.height) + 2.62 + 'rem'}"></div>
                        <div class="prizeBox" v-show="prizes.prizesType == 3">
                            <img :src="prizesId == '51'? shake_prizes_2 : prizesId == '52'? shake_prizes_20 : prizesId == '53'? shake_prizes_30 : prizesId == '54'? shake_prizes_80 : prizesId == '55'? shake_prizes_100 : ''" alt="">
                            <!--<img v-lazy="{src:prizes.prizesPrice == 2? shake_prizes_2 : prizes.prizesPrice == 20? shake_prizes_20 : prizes.prizesPrice == 30? shake_prizes_30 : prizes.prizesPrice == 80? shake_prizes_80 : prizes.prizesPrice == 100? shake_prizes_100 : ''}" alt="">-->
                        </div>
                    </div>
                </popup>
            </div>
        </div>
    </div>
</template>
<script>
    import Shake from 'shake.js'
    import {TransferDom, Popup} from 'vux'
    import {mapState,mapActions} from 'vuex'
    import {UPDATA_INTERACTIVE} from "store/interactive";
    const SHAKE_SPEED = 300;
    let lastTime = 0;//上次变化的时间
    let x =  0 ,y =0, z = 0, lastX = 0, lastY =0 ,lastZ  = 0;//位置变量初始化
    let myShakeEvent = new Shake({
        threshold: 12, // optional shake strength threshold
        timeout: 500 // optional, determines the frequency of event generation
    });
    export default {
        name: 'shake',
        directives: {
            TransferDom
        },
        components: {
            Popup,
        },
        activated() {
            this.init()
        },
        data() {
            return {
                gameStatus: 'startBefore', // startBefore 开始之前  start 开始  game 游戏中  end 未中奖结束  open 中奖 openAfter 打开之后
                show: false,
                shakeStatus: false,
                time: 15,
                aa:require('../../assets/mp3/5018.mp3'),
                bb:require('../../assets/mp3/5012.mp3'),
                prizesId:'',
                prizes:{},
                shake_prizes_2:require('../../assets/img/shake_prizes_2.png'),
                shake_prizes_20:require('../../assets/img/shake_prizes_20.png'),
                shake_prizes_30:require('../../assets/img/shake_prizes_30.png'),
                shake_prizes_80:require('../../assets/img/shake_prizes_80.png'),
                shake_prizes_100:require('../../assets/img/shake_prizes_100.png'),
                title:''
            }
        },
        methods: {
            ...mapActions([UPDATA_INTERACTIVE]),
            init() {
                this.shakeStatus = false
                this.show = false
                this.gameStatus = 'startBefore'
                this.time = 15
                this.prizesId = ''
                this.title = this.$route.query.title
                this.Interactive.customStatistics({type: 2, eventID: 'activity_area',map: {name: this.title}})
                this.prizes = {
                }
            },
            gameStart() {

                if(!this.comJS.getCookie('t')){
                    this.Interactive.pushTokentoJS();
                    return
                }
                if(this.comJS.isIos()){
                    let audio = this.$refs.shakeAudio;
                    audio.load()
                    audio.play()
                    audio.pause()
                    let audioTwo = this.$refs.shakeAudioTwo;
                    audioTwo.load()
                    audioTwo.play()
                    audioTwo.pause()
                }
                this.$ajax.activity.queryPrizesAndLotteryNumber({activityId:'ACTIVITY_20181101_SHAKE'})
                    .then((res)=>{
                        if(res.body.content.activityStatus == 0){
                            this.$vux.alert.show({
                                title:'操作提示',
                                content:'活动未开始',
                            })
                            return
                        }
                        if(res.body.content.activityStatus == 2){
                            this.$vux.alert.show({
                                title:'操作提示',
                                content:'活动已结束',
                            })
                            return
                        }
                        if(res.body.content.activityStatus == 1){
                            if(res.body.content.lotteryNumber <= 0){
                                this.$vux.alert.show({
                                    title:'操作提示',
                                    content:'您已经没有游戏次数',
                                })
                                return
                            }
                            this.turnActiveWheel()
                        }else{
                            this.$vux.alert.show({
                                title:'操作提示',
                                content:'活动不在进行中',
                            })
                        }
                    })

            },
            shakeStart() {
                console.log('游戏开始', new Date())
                this.gameStatus = 'start'
                this.show = true
                this.timeChange()
                this.shakeWtach()
            },
            timeChange() {
                setTimeout(() => {
                    if (this.time == 0 && this.shakeStatus == false && this.gameStatus == 'start') {
                        myShakeEvent.stop();
                        this.init()
                    }
                    if (this.time > 0 && this.gameStatus == 'start' || this.time > 0 && this.gameStatus == 'open') {
                        this.time--
                        this.timeChange()
                    }
                }, 1000)
            },
            shakeWtach() {
                if(this.comJS.isAndroid() && this.interactive.versionName.versionName >= 25){
                    this.Interactive.listenToShake()
                }else{
                    myShakeEvent.start();
                    window.addEventListener('shake', this.shakeEventDidOccur, false);
                }

            },
            turnActiveWheel(){
                this.$ajax.activity.turnActiveWheel({activityId:'ACTIVITY_20181101_SHAKE'})
                    .then((res)=>{
                        this.prizesId = res.body.content.prizesId
                        this.shakeStart(res)
                    }).catch(()=>{
                    this.init()
                })
            },
            shakeEventDidOccur() {
                this.shakeStatus = true
                this.gameStatus = 'open'
                if(this.comJS.isAndroid() && this.interactive.versionName.versionName >= 25){  //停止监听
                    this.Interactive.stopListenToShake()
                    this.UPDATA_INTERACTIVE({type:'startWave',content: {startWave:false}})
                }else{
                    myShakeEvent.stop();
                }
                let audio = this.$refs.shakeAudio;
                audio.pause()
                audio.currentTime = 0
                audio.play()
                setTimeout(()=>{
                    this.affirmPrizes()
                },2000)
            },
            affirmPrizes(){
                this.$ajax.activity.affirmPrizes({activityId:'ACTIVITY_20181101_SHAKE',prizesId:this.prizesId})
                    .then((res) => {
                        let audioTwo = this.$refs.shakeAudioTwo;
                        audioTwo.pause()
                        audioTwo.currentTime = 0
                        this.vibration()
                        audioTwo.play()
                        this.prizes = res.body.content
                        this.gameStatus = 'openAfter'
                    })
                    .catch(()=>{
                        this.init()
                    })
            },
            vibration(){
                if(this.comJS.isAndroid() ? this.interactive.versionName.versionName >= 23 : this.interactive.versionName.versionName >= "1.1.3"){
                    this.Interactive.callSystemVibrate()
                }else{
                    navigator.vibrate = navigator.vibrate
                        || navigator.webkitVibrate
                        || navigator.mozVibrate
                        || navigator.msVibrate;

                    if (navigator.vibrate) {
                        // 支持
                        console.log("支持设备震动！");
                    }else{
                        console.log('设备不支持震动')
                    }
                    navigator.vibrate([500]);
                }

            }
        },
        watch:{
          'interactive.startWave':function () {
              if(this.comJS.isAndroid() && this.interactive.versionName.versionName >= 25 && this.interactive.startWave.startWave == true){
                  this.shakeEventDidOccur()
              }
          }
        },
        computed: mapState({interactive: state => state.interactive,})
    }
</script>
<style lang="less" scoped>
    .shakeBg {
        width: 100%;
        height: 100%;
        background: url("../../assets/img/shakeNewBg.png") no-repeat;
        background-size: 100% auto;
        position: relative;
    }

    .shakeStartBtn {
        width: 2.36rem;
        height: .78rem;
        background: url("../../assets/img/shakeStartNewBtn.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        right: 0;
        bottom: .32rem;
        margin: auto;
    }

    .gameTime {
        position: absolute;
        right: .18rem;
        width: 1.38rem;
        height: .34rem;
        background-color: rgba(0, 0, 0, .5);
        border-radius: 1.2rem;
        font-size: .24rem;
        color: #fff;
        line-height: .34rem;
        text-align: center;
    }

    .shack_pic {
        position: absolute;
        width: 6.3rem;
        height: 6.3rem;
        left: 0;
        right: 0;
        margin: auto;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .shakeClose{
        width: 0.6rem;
        height: 0.6rem;
        background: url("../../assets/img/shakeClose.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 1.34rem;
        top: 2.62rem;
    }
    .prizeBox{
        width: 6.04rem;
        height: 4.52rem;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        transform: translateY(10%);
        img{
            width: 100%;
            height: 100%;
        }
    }
</style>